import { Tooltip } from "antd";
import { Parser } from "expr-eval";
import { CoinsIcon, PencilIcon, ReceiptIcon } from "lucide-react";
import NP from "number-precision";
import type { IChannelMonthlyRevenue } from "~/types/manage/channel/coin";
import type { IConfig } from "~/types/manage/channel/list";
import { amountToYuan, calculateTaxAmount, cn } from "~/utils/ui.util";
import InvoiceInfo from "./invoice-info";
const parser = new Parser();

interface Props {
  value?: any;
  record: IChannelMonthlyRevenue;
  month: string;
  editRevenue: (record: IChannelMonthlyRevenue, month: string) => void;
}

export default function ChannelRevenueCell({
  record,
  month,
  editRevenue,
}: Props) {
  const value = record.revenues[month]?.amount || 0;
  const invoiceAmount = amountToYuan(value);
  const config: IConfig = JSON.parse(record.config || "{}");
  let taxValue = 0;
  if (config.customTax) {
    // FIXME 混沌【手百】特殊处理
    taxValue = config.customTax
      ? amountToYuan(
          NP.round(parser.evaluate(config.customTax, { amount: value }), 2),
        )
      : 0;
  } else {
    taxValue = record.taxRate
      ? amountToYuan(calculateTaxAmount(value, record.taxRate))
      : 0;
  }
  const afterTaxValue = NP.minus(invoiceAmount, taxValue);

  const showInfo = record.revenues[month]?.id;

  return showInfo ? (
    <div className="group/item-ceil flex h-25 w-36 flex-col text-xs">
      <div className="flex items-center gap-1">
        <span className="text-gray-400">开票:</span>
        <span className="font-bold text-[#34495e]">{invoiceAmount}</span>
      </div>
      <div className="flex items-center gap-1">
        <span className="text-gray-400">扣税:</span>
        <span className="font-bold text-[#7f8c8d]">{taxValue}</span>
      </div>
      <div className="flex items-center gap-1">
        <span className="text-gray-400">税后:</span>
        <span className="font-bold text-[#2ecc71]">{afterTaxValue}</span>
      </div>
      <div className="flex flex-1 items-end gap-2">
        <Tooltip
          placement="top"
          title={record.revenues[month].isInvoiced ? "已开发票" : "未开发票"}
        >
          <ReceiptIcon
            className={cn({
              "text-[#2ecc71]": record.revenues[month].isInvoiced,
              "text-gray-400": !record.revenues[month].isInvoiced,
            })}
            size={18}
          />
        </Tooltip>
        <Tooltip
          placement="top"
          title={record.revenues[month].isPaid ? "已打款" : "未打款"}
        >
          <CoinsIcon
            className={cn({
              "text-[#2ecc71]": record.revenues[month].isPaid,
              "text-gray-400": !record.revenues[month].isPaid,
            })}
            size={18}
          />
        </Tooltip>
        <div className="invisible flex flex-1 justify-end gap-2 group-hover/item-ceil:visible">
          <InvoiceInfo record={record} month={month} />
          <div
            className="cursor-pointer text-gray-400 hover:text-blue-500"
            onClick={() => {
              editRevenue?.(record, month);
            }}
          >
            <PencilIcon size={18} />
          </div>
        </div>
      </div>
    </div>
  ) : (
    <div className="group/item-ceil flex h-25 w-36 flex-col text-xs">
      <div>
        <span className="text-gray-300">暂未录入信息</span>
      </div>
      <div className="flex flex-1 items-end gap-2">
        <div className="invisible flex flex-1 justify-end gap-2 group-hover/item-ceil:visible">
          {/* <InvoiceInfo record={record} month={item} /> */}
          <div
            className="cursor-pointer text-gray-400 hover:text-blue-500"
            onClick={() => {
              editRevenue?.(record, month);
            }}
          >
            <PencilIcon size={18} />
          </div>
        </div>
      </div>
    </div>
  );
}
